<template>
  <div class="questions-tk">
    <el-card>
      <!-- 新增按钮 -->
      <div class="boxbtn">
        <el-button type="success" icon="el-icon-edit" class="addbtn" @click="Jump"
          >新增试题</el-button
        >
      </div>
      <!-- 新增按钮 -->
      <!-- 学科类型 -->
      <el-form label-width="80px" ref="Basicsku">
        <!-- 第一行 -->
        <el-row :gutter="20">
          <!-- 学科 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="学科">
                <el-select v-model="form.subjectID" placeholder="请选择" @change="catalog">
                  <el-option
                    v-for="(item, index) in BasicQuestions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                   
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <!-- 二级目录 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="二级目录">
                <el-select v-model="form.catalogID" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in catalogs"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <!-- 标签 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="标签">
                <el-select v-model="form.tags" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in Simplelabel"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <!-- 关键字 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="关键字">
                <el-input v-model="form.keyword"></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="20">
          <!-- 试题类型 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="试题类型">
                <el-select v-model="form.questionType" placeholder="请选择">
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="多选" value="2"></el-option>
                  <el-option label="简单" value="3"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <!-- 难度 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="难度">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option label="单选" value="1"></el-option>
                  <el-option label="多选" value="2"></el-option>
                  <el-option label="简单" value="3"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <!-- 方向 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="方向">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option label="o2o" value="o2o"></el-option>
                  <el-option label="外包服务" value="外包服务"></el-option>
                  <el-option label="企业服务" value="企业服务"></el-option>
                  <el-option label="互联网金融" value="互联网金融"></el-option>
                  <el-option label="企业咨询" value="企业咨询"></el-option>
                  <el-option label="互联网" value="互联网"></el-option>
                  <el-option label="电子商务" value="电子商务"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <!-- 录入人 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="录入人">
                <el-select v-model="form.creatorID" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in usernameprople"
                    :key="index"
                    :label="item.username"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="20">
          <!-- 题目备注 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="题目备注" label-width="80px">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item></div
          ></el-col>
          <!-- 企业简称 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item></div
          ></el-col>
          <!-- 城市 -->
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="城市">
                <el-select
                  v-model="form.province"
                  placeholder="请选择"
                  class="city"
                  @change="handlescity"
                >
                  <el-option
                    v-for="(item, index) in cit"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="form.city"
                  placeholder="请选择"
                  class="city"
                >
                  <el-option
                    v-for="(item, index) in usercitys"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <!-- 清除 搜索  -->
          <el-col :span="6"
            ><div class="grid-content bg-purple seachclear">
              <el-button size="small" @click="clear">清除</el-button>
              <!-- 搜索 -->
              <el-button size="small" type="primary" @click="seach"
                >搜索</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-form>
      <!-- 学科类型 -->

      <!-- 提示的消息文案 -->
      <el-alert :title="`数据共一共${total}条`" type="info" show-icon>
      </el-alert>

      <!-- 列表区域 -->
      <el-table :data="itemsBasics" style="width: 100%">
        <el-table-column prop="number" label="试题编号">
          <!-- <template slot-scope="scope">
            {{scope.row.number}}
          </template> -->
        </el-table-column>
        <el-table-column prop="subject " label="学科">
          <template slot-scope="scope">
            {{ scope.row.subject }}
          </template>
        </el-table-column>
        <el-table-column prop="catalog" label="目录">
          <template slot-scope="scope">
            {{ scope.row.catalog }}
          </template>
        </el-table-column>
        <el-table-column prop="questionType " label="题型">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-if="scope.row.questionType == 2">多选</span>
            <span v-if="scope.row.questionType == 3">简单</span>
          </template>
        </el-table-column>
        <el-table-column prop="question " label="题干">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate " label="录入时间" width="200px">
          <template slot-scope="scope">
            {{ parseTime(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty " label="难度">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty == 1">简单</span>
            <span v-if="scope.row.difficulty == 2">一般</span>
            <span v-if="scope.row.difficulty == 3">困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator " label="录入人">
          <template slot-scope="scope">
            {{ scope.row.creator }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 预览 -->
            <el-tooltip content="预览" placement="bottom" effect="light">
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                size="small"
                @click="Preview(scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip content="修改" placement="bottom" effect="light">
              <el-button
                type="success"
                icon="el-icon-edit"
                circle
                size="small"
                @click="xiugai(scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip content="删除" placement="bottom" effect="light">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="small"
                @click="closeshuju(scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip content="加入精选" placement="bottom" effect="light">
              <el-button
                type="success"
                icon="el-icon-check"
                circle
                size="small"
                @click="jiarujingxuan(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.pageNum"
        :page-sizes="[5, 7, 10, 15]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 列表区域 -->
    </el-card>

    <!-- 预览对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="PreviewdialogVisible"
      width="50%"
    >
      <!-- 内容 -->
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【题型】:
            <span v-if="diologtx.questionType == 1">单选题</span>
            <span v-if="diologtx.questionType == 2">多选题</span>
            <span v-if="diologtx.questionType == 3">简单</span>
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【编号】:{{ diologtx.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【难度】:
            <span v-if="diologtx.difficulty == 1">简单</span>
            <span v-if="diologtx.difficulty == 2">一般</span>
            <span v-if="diologtx.difficulty == 3">困难</span>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【标签】:{{ diologtx.tags }}
          </div></el-col
        >
      </el-row>
      <br />
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【学科】:{{ diologtx.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【目录】:{{ diologtx.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【方向】:{{ diologtx.direction }}
          </div></el-col
        >
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <hr />
      <!-- 题干 -->
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">【题干】:</div></el-col
        >
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <div style="color: blue" v-html="diologtx.question"></div>
      <div>
        <span v-if="diologtx.questionType == 1">单选题</span>
        <span v-if="diologtx.questionType == 2">多选题</span>
        <span v-if="diologtx.questionType == 3">简答题</span>
        选项:(以下选中的选项为正确答案)
      </div>
      <!-- 单选 -->
      <div v-if="diologtx.questionType == 1">
        <el-radio-group v-model="reiod" class="diologtxoptions">
          <el-radio
            v-for="(item, index) in diologtx.options"
            :key="index"
            :label="item.title"
          ></el-radio>
        </el-radio-group>
      </div>
      <!-- 多选 -->
      <div v-if="diologtx.questionType == 2">
        <el-checkbox-group v-model="checkouteds" class="diologtxoptions">
          <el-checkbox
            v-for="(item, index) in diologtx.options"
            :key="index"
            :label="item.title"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 简答 -->
      <div v-if="diologtx.questionType == 3">
        <div>123</div>
      </div>

      <hr />
      <div>
        【参考答案】:
        <el-button type="danger" @click="videoplay">视频答案预览</el-button>
      </div>
      <div>
        <video
          :src="diologtx.videoURL"
          class="videowidth"
          autoplay
          muted
          controls
          v-show="videos"
        ></video>
      </div>

      <hr />

      <div>【答案解析】:{{ diologtx.answerID }}</div>
      <hr />
      <div>【题目备注】:{{ diologtx.remarks }}</div>
      <br />

      <!-- 底部 -->
      <div class="closedilog">
        <el-button @click="PreviewdialogVisible = false" class="closebtn"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入时间格式
import { parseTime } from "@/utils";
import { list, detail, remove, choiceAdd } from "@/api/hmmm/questions";
// 学科
import Subject from "@/api/hmmm/subjects";
// 目录
import { simple as simples } from "@/api/hmmm/directorys";
// 标签
import { simple as evntsimple } from "@/api/hmmm/tags";
// 录入人
import { simple as username } from "@/api/base/users";
// 城市
import { provinces, citys } from "@/api/hmmm/citys";
export default {
  data() {
    return {
      form: {
        // 当前页数
        page: 1,
        // 页尺寸
        pagesize: 5,
        // 学科
        subjectID: null,
        // 难度
        difficulty: null,
        // 试题类型
        questionType: null,
        // 标签名称
        tags: null,
        // 企业所在地省份
        province: null,
        // 企业所在城市
        city: null,
        // 关键字
        keyword: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 方向
        direction: null,
        // 录入人
        creatorID: null,
        // 目录
        catalogID: null,
      },

      pages :{
        pageNum:1,
        pageSize:5,
      },
      // 控制视频的显影
      videos: false,
      // 单选
      reiod: "",
      // 多选
      checkouteds: [],
      //
      isType: "",
      // 学科
      BasicQuestions: {},
      // 目录
      catalogs: {},
      // 标签
      tagss: {},
      // 目录
      Simplelabel: {},
      // 录入人
      usernameprople: {},
      // 省份
      cit: [],
      // 城市
      usercitys: [],

      // 后台获取数据
      queryinfo: {
        page: 1,
        pages: 1,
        pagesize: 10,
      },
      // 列表数据
      itemsBasics: [],
      // 条数
      total: 0,
      // 控制对话框的显示和影藏
      PreviewdialogVisible: false,
      // 对话框里得数据
      diologtx: {},
    };
  },
  created() {
    // 学科
    this.BasicQuestion();
    // 目录
    // this.catalog();
    // 标签
    // this.tags();
    // 录入人
    this.usernamessss();
    // 城市
    this.cityas();
    this.BasicsBku();
  },
  mounted() {},
  methods: {
    // 列表数据
    async BasicsBku() {
      const { data } = await list(this.form);
      // 条数
      this.total = data.counts;
      // 列表数据
      this.itemsBasics = data.items;
    },
    // 获取题库
    async BasicQuestion() {
      const { data } = await Subject.simple();

      this.BasicQuestions = data;
      // console.log(this.BasicQuestions);
    },
    // 目录列表  标签
    async catalog() {
      const { data } = await simples({
        data:this.form.subjectID
      });
      this.catalogs = data;
      const res = await evntsimple({
        data:this.form.subjectID
      });
      this.Simplelabel = res.data
    },
    // 标签列表
    // async tags() {
      
    //   // console.log(this.Simplelabel);
    // },
    // 获取录入人
    async usernamessss() {
      const { data } = await username({
        data: this.form.keyword,
      });
      this.usernameprople = data;
    },
    // 城市
    async cityas() {
      const res = await provinces();
      // console.log(res);
      this.cit = res;
    },
    //  二级城市
    async handlescity() {
      const ress = await citys(this.form.province);
      // console.log(ress);
      this.usercitys = ress;
    },
    // 清空表单
    clear() {
      // this.$refs.Basicsku.resetFields();
      this.form = {};
      this.BasicsBku();
    },
    // 搜索
    async seach() {
      const { data } = await list(this.form);
      this.queryinfo = data;
      this.total = data.counts;
      this.itemsBasics = data.items;
      console.log(111);
    },
    // 这是时间格式化
    parseTime,

    // 分页功能
    handleSizeChange(newSize) {
      this.form.pagesize = newSize;
      this.BasicsBku();
    },
    handleCurrentChange(newpage) {
      this.form.page = newpage;
      this.BasicsBku();
    },
    // 预览对话框
    async Preview(scoipt) {
      // console.log(scoipt);
      const res = {
        id: scoipt.id,
      };
      this.PreviewdialogVisible = true;
      const { data } = await detail(res);
      this.diologtx = data;
      console.log(this.diologtx);
      this.isoption();
    },
    // 判断多选单选默认选中
    isoption() {
      // 判断多选单选
      // this.isType = this.diologtx.questionType
      this.diologtx.options.forEach((item) => {
        if (item.isRight === 1) {
          this.reiod = item.title;
          this.checkouteds.push(item.title);
        }
      });
    },
    // 点击按钮播放视频
    videoplay() {
      this.videos = true;
    },
    // 删除列表数据
    closeshuju(scorig) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = {
            id: scorig.id,
          };
          const data = await remove(res);
          console.log(data);
          this.BasicsBku();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 加入精选
    jiarujingxuan(id) {
      this.$confirm("此操作将该题目加入精选, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(async () => {
          const data = await choiceAdd({ id: id, choiceState: 1 });
          this.BasicsBku();
          console.log(data);
          this.$message({
            type: "success",
            message: "加入精选成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消加入",
          });
        });
    },
    // 修改跳转
    xiugai(scope) {
      this.$router.push({path:'/questions/new',query: {scope}});
    },
    // 跳转新增
    Jump() {
      // this.$router.push('/questions-new');
      this.$router.push({path:'/questions/new'});
    }
  },
};
</script>

<style scoped lang="less">
.questions-tk {
  padding-right: 10px;
  .boxbtn {
    overflow: hidden;
    margin-bottom: 20px;
    .addbtn {
      float: right;
    }
  }
  // /deep/.el-input__inner {
  //   width: 250px;
  // }
  .seachclear {
    padding-left: 184px;
  }
  /deep/.city {
    .el-input__inner {
      width: 113px;
    }
  }
  .diologtxoptions {
    display: flex;
    flex-direction: column;
  }
  .el-radio,
  .el-checkbox {
    padding: 8px 0px;
  }
  .videowidth {
    width: 400px;
  }
  .closedilog {
    text-align: right;
    .closebtn {
      background-color: #409eff;
      color: #fff;
    }
  }
}
</style>
